<template>
    <div>
        <!-- 发布评论 -->
        <el-input v-model="textarea" :rows="4" type="textarea" maxlength="130" show-word-limit placeholder="说点什么吧"
            resize="none" />
        <!-- 精彩评论 -->
        <div v-show="showBrilliant">
            <p class="text-xl mt-5">精彩评论</p>
            <ul>
                <li v-for="(item, index) in commentList.hotComments" :key="index"
                    class="rounded-xl flex p-3 my-4 bg-[var(--inputBg)]">
                    <img loading="lazy" class="object-cover w-14 h-14 border rounded-full" :src="item.user.avatarUrl"
                        alt="">
                    <div class=" w-full ml-3">
                        <div class="flex items-center">
                            <p class="text-[var(--playBg)] mr-1">{{ item.user.nickname }}</p>
                            <!-- vip -->
                            <img v-if="item.medal" class="object-cover w-14" :src="item.medal.wearPic" alt="">
                        </div>
                        <p class="line-clamp-3 mt-1 mb-4">{{ item.content }}</p>
                        <div class="w-full flex justify-between">
                            <!-- 日期 -->
                            <span class="text-[var(--iconBg)]">
                                {{ item.timeStr }}
                            </span>
                            <div>
                                <i class="iconfont icon-good ml-5 hover:cursor-pointer"></i>
                                <i class="iconfont icon-zhuanfa ml-5 hover:cursor-pointer"></i>
                                <i class="iconfont icon-xiaoxi ml-5 hover:cursor-pointer"></i>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 最新评论 -->
        <div class="flex items-center mt-10">
            <h1 class="text-xl mr-1">最新评论</h1>
            <span class="pt-1">({{ commentList.total }})</span>
        </div>
        <ul>
            <li v-for="(item, index) in commentList.comments" :key="index"
                class="flex rounded-xl bg-[var(--inputBg)] p-3 my-5">
                <img loading="lazy" class="object-cover w-14 h-14 border rounded-full" :src="item.user.avatarUrl"
                    alt="">
                <div class=" w-full ml-3">
                    <div class="flex items-center">
                        <p class="text-[var(--playBg)] mr-1">{{ item.user.nickname }}</p>
                        <!-- vip -->
                        <img v-if="item.medal" class="object-cover w-12" :src="item.medal.wearPic" alt="">
                    </div>
                    <p class="line-clamp-3 mt-1 mb-4">{{ item.content }}</p>
                    <div class="w-full flex justify-between">
                        <!-- 日期 -->
                        <span class="text-[var(--iconBg)]">
                            {{ item.timeStr }}
                        </span>
                        <div>
                            <i class="iconfont icon-good ml-5 hover:cursor-pointer"></i>
                            <i class="iconfont icon-zhuanfa ml-5 hover:cursor-pointer"></i>
                            <i class="iconfont icon-xiaoxi ml-5 hover:cursor-pointer"></i>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref } from "vue"
import type { MvCommentType } from '@renderer/view/home/findMusic/type'
const textarea = ref("")
let { commentList } = defineProps<{
    commentList: MvCommentType
    showBrilliant: boolean
}>()
</script>
<style scoped lang='less'></style>